<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!--    <script src="./first.js"></script>-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
<div id="header">

    <header-web @c_event="receive($event)"></header-web>

    <div id="test">
        {{getData}}
    </div>
    <input type="text" v-model="search">
    <ul>
        <li v-for="d in myList">
            {{d}}
        </li>
    </ul>
    <keep-alive>
    <component v-bind:is="who"></component>
    </keep-alive>
    <ul>
        <li><a @click="who='home'">home</a></li>
        <li><a @click="who='news'">news</a></li>
    </ul>
</div>
<div id="app">

    <h1>Hello App!</h1>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>



</body>
<script>

    Vue.component(
        'header-web', {
            template: `
            <div id="header">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#e2f1ee" text-color="#2e3131">
                    <el-menu-item index="1">首页</el-menu-item>
                    <el-menu-item index="2">主题广场</el-menu-item>
                    <el-menu-item index="3">创建新主题</el-menu-item>
                    <el-menu-item index="4">
                        <el-input v-model.lazy="search" placeholder="输入搜索" ref="search"></el-input>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <el-button @click="visible = true">搜索</el-button>
                      <el-button @click="send()">发送</el-button>
                    </el-menu-item>
                    <el-menu-item index="6" disabled class="right">个人中心</el-menu-item>
                    <el-menu-item index="7" v-show="visible">登录</el-menu-item>
                    <el-menu-item index="8" disabled>注册</el-menu-item>
                </el-menu>
            </div>
            `,
            // data(){
            //     return {
            //         visible: false,
            //         search: '',
            //         getData: ''
            //     }
            // },
            props:{
                visible: Boolean,
                search: String,
                getData: String
            },
            methods:{
                send(){
                    bus.$emit('c_event', this.$refs.search.value)
                }
            }
        }
    )

    var bus = new Vue();

    var vm = new Vue({
        el: '#header',
        data: {
            visible: false,
            search: '',
            getData: '',
            list: ['Hi', 'Hello', 'Hole', 'Hai'],
            who: "home"
        },
        mounted() {
            axios.get('http://localhost:8080/index/init').then(
                response => (
                    this.getData = response.data
                )
            );
            bus.$on('c_event', (data)=>{
                console.log('已收到消息', data);
            })
        },
        computed:{
            myList: function (){
                return this.list.filter(
                    item=> item.indexOf(this.search) > -1
                )
            }
        },
        methods:{
            receive(e){
                this.list.push(e)
            }
        },
        components:{
            "home":{
                template:
                `
                <div><input type="text"></div>
                `
            },
            "news":{
                template:
                `
                <div>news</div>
                `
            }
        }
    });


    console.log(VueRouter);
    Vue.use(VueRouter);

    const Foo = {template: '<div>foo</div>'}
    const Bar = {template: '<div>bar</div>'}

    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    const routes = [
        {path: '/foo', component: Foo},
        {path: '/bar', component: Bar}
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
        routes // (缩写) 相当于 routes: routes
    })

    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
        router
    }).$mount('#app')

</script>

</html>